'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';

interface UserInputProps {
  userInput: string;
  onInputChange: (input: string) => void;
  onSubmit: () => void;
  isLoading: boolean;
}

export default function UserInput({ userInput, onInputChange, onSubmit, isLoading }: UserInputProps) {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (userInput.trim() && !isLoading) {
      onSubmit();
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      className="w-full max-w-2xl mx-auto"
    >
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="relative">
          <textarea
            value={userInput}
            onChange={(e) => onInputChange(e.target.value)}
            placeholder="告诉我你遇到的编程困惑或需要鼓励的地方... 🤔"
            className="w-full px-6 py-4 bg-white bg-opacity-10 backdrop-blur-md border-2 border-purple-300 border-opacity-30 rounded-2xl text-white placeholder-gray-300 resize-none focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-300"
            rows={4}
            disabled={isLoading}
          />

          <div className="absolute top-2 right-2">
            <div className="flex space-x-2">
              <span className="text-2xl animate-pulse">💻</span>
              <span className="text-2xl animate-pulse delay-100">🚀</span>
              <span className="text-2xl animate-pulse delay-200">💡</span>
            </div>
          </div>
        </div>

        <div className="flex justify-center">
          <motion.button
            type="submit"
            disabled={!userInput.trim() || isLoading}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className={`glow-button px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold text-lg rounded-full transition-all duration-300 ${
              !userInput.trim() || isLoading
                ? 'opacity-50 cursor-not-allowed'
                : 'hover:from-purple-700 hover:to-pink-700'
            }`}
          >
            {isLoading ? (
              <span className="flex items-center space-x-2">
                <span className="animate-spin">⏳</span>
                <span>AI正在思考鼓励的话语...</span>
              </span>
            ) : (
              <span className="flex items-center space-x-2">
                <span>发送</span>
                <span>🎯</span>
              </span>
            )}
          </motion.button>
        </div>
      </form>
    </motion.div>
  );
}